<template>
  <ul class="container">
      <template v-for="section in itemJson">
          <li>
            <div class="content_header">
              <div class="content_header_left">
                <div class="content_header_img">
                    <img src="~@/assets/img/myLogin.png">
                </div>
                <div class="content_header_name">
                  <span>链世界</span>
                  <span class="content_header_time">2015-02-03</span>
                </div>
              </div>
              <div class="content_header_right">
                关注
              </div>
            </div>
            <div class="content_content">
              可以说是相当性感与传神了
            </div>
            <div class="content_img">
              <img src="~@/assets/img/myColorp.png">
            </div>
            <div class="content_array_img">
              <img src="~@/assets/img/myColorp.png">
              <img src="~@/assets/img/myColorp.png">
              <img src="~@/assets/img/myColorp.png">
              <img src="~@/assets/img/myColorp.png">
              <img src="~@/assets/img/myColorp.png">
              <img src="~@/assets/img/myColorp.png">
            </div>
            <list-info :json='section'></list-info>
            <div class="bg_line"></div>
          </li>
      </template>
  </ul>
</template>
<script>
import {mapMutations} from 'vuex'
export default {
  props: {
    itemJson: {
      default: '',
      collect: ''
    }
  },
  methods: {
    ...mapMutations('detail', [
      'set_listArticle'
    ])
  }
}
</script>
<style scoped lang='stylus'>
  .content_header {
    display: flex;
    flex-direction: row;
    color: #000;
    font-size: 14px;
    justify-content: space-between;
    padding: 0 15px;
    padding-top: 15px;
    .content_header_left {
      display: flex;
      flex-direction: row;
      .content_header_img {
        img{
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      };
      .content_header_name {
        padding-left: 6px;
        padding-top: 3px;
        display: flex;
        flex-direction: column;
        .content_header_time {
           font-size: 12px;
           color: #999999;
        }
      }
    }
    .content_header_right {
      color: #f24e4d;
      margin-top: 10px;
    }
  }
  .content_content {
    color: #333;
    font-size: 18px !important;
    line-height: 30px;
    padding: 0.4rem 0.427rem 0.2rem;
  }
  .content_img {
     img {
       width: 100%;
       min-height: 6.6875rem;
     }
  }
  .content_array_img {
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    flex-wrap: wrap;
    img {
      width: 33%;
      height: 3.6875rem;
      min-height: 3.6875rem;
      padding-top: 2px;
    }
  }
  .bg_line {
      height: 0.2333rem;
      background: #f5f5f5;
  }
</style>
<style>

</style>
